<style scoped>
.layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.layout-breadcrumb {
    padding: 10px 15px 0;
}

.layout-content {
    min-height: 720px;
    margin: 15px;
    overflow: hidden;
    background: rgb(243, 243, 243);
    border-radius: 4px;
}

.layout-content-main {
    padding: 20px 10px;
}

.layout-menu-left {
    background: #464c5b;
    /*min-width: 100px;*/
}

.layout-header {
    height: 40px;
    background: #fff;
    box-shadow: 0 2px 0px #39f;
}

.layout-logo-left {
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
    line-height: 30px;
    color: white;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

.layout-ceiling-main a {
    color: #9ba7b5;
}

.layout-hide-text .layout-text {
    display: none;
}

.ivu-col {
    transition: width .2s ease-in-out;
}

.ivu-menu-item-selected {
    border-right: none!important;
    color: #fff!important;
    background: #39f!important;
}
</style>

<template>
    <div class="layout"
         :class="{'layout-hide-text': spanLeft < 3}">
        <Row type="flex">
            <i-col :span="spanLeft"
                   class="layout-menu-left">
                <Menu ref="menu"
                      :active-name="setActive"
                      theme="dark"
                      width="auto"
                      @on-select="routeTo">
                    <div class="layout-logo-left">
                        <h3>后台管理</h3></div>
                    <myMenuItem :item="item"
                                v-for="item in menuList"></myMenuItem>
                </Menu>
            </i-col>
            <i-col :span="spanRight"
                   style="background: rgb(243,243,243)">
                <div class="layout-header">
                    <div class="layout-breadcrumb">
                        <Breadcrumb>
                            <Breadcrumb-item>{{this.$route.name}}</Breadcrumb-item>
                        </Breadcrumb>
                    </div>
                </div>
                <div class="layout-content">
                    <div class="layout-content-main">
                        <transition mode="out-in">
                            <router-view></router-view>
                        </transition>
                    </div>
                </div>
            </i-col>
        </Row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            spanLeft: 3,
            spanRight: 21,
            menuList: []
        }
    },
    mounted() {
        this.$http.post("services/getmenu").then(response => {
            var data = response.data;
            this.menuList = data;
        }, response => {
            this.$Message.error("获取失败, 返回: " + response);
        });
    },
    computed: {
        iconSize() {
            return this.spanLeft === 3 ? 14 : 24;
        },
        setActive() {
            return this.$route.path.replace('/', '');
        }
    },
    methods: {
        routeTo(e) {
            this.$router.push(e);
        }
    }
}
</script>